import { ProTable, ProColumns } from '@ant-design/pro-components';
import { useHistory } from 'umi';
import { queryMergeRecord } from '../service';
import type { MergeRecordTableItem } from '../types.d';

const MergeList = () => {
  const history = useHistory();
  const columns: ProColumns<MergeRecordTableItem>[] = [
    {
      title: '订单号码',
      dataIndex: 'orderNo',
      align: 'center',
      renderText: (orderNo) => (
        <a
          onClick={() => {
            history.push({ pathname: '/parking-orders/detail', state: orderNo });
          }}
        >
          {orderNo}
        </a>
      ),
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
    },
    {
      title: '合并后驶入时间',
      dataIndex: ['newOrderInfo', 'inTime'],
      align: 'center',
      valueType: 'dateTime',
      hideInSearch: true,
      // renderText: (_, record) => record.newOrderInfo.inTime,
    },
    {
      title: '合并后驶出时间',
      dataIndex: ['newOrderInfo', 'outTime'],
      align: 'center',
      valueType: 'dateTime',
      hideInSearch: true,
      // renderText: (_, record) => record.newOrderInfo.inTime,
    },
    {
      title: '合并后金额',
      tooltip: '如果合并后的订单为在停订单，则该金额为截止到合并时的停车费用',
      dataIndex: ['newOrderInfo', 'payableAmount'],
      align: 'center',
      valueType: 'money',
      hideInSearch: true,
      renderText: (_, record) => record.newOrderInfo.payableAmount / 100,
    },

    {
      title: '操作人',
      dataIndex: 'operAccount',
      align: 'center',
      hideInSearch: true,
      renderText: (_, record) => record.operName,
    },
    {
      title: '操作时间',
      dataIndex: 'operTime',
      align: 'center',
      hideInSearch: true,
      valueType: 'dateTime',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInSearch: true,
    },
    {
      title: '合并前的订单',
      dataIndex: '_id',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <ul style={{ margin: 0, padding: 0, userSelect: 'none' }}>
            {record.orderInfos.map((item) => (
              <li key={item.orderNo}>
                <a
                  onClick={() => {
                    history.push({ pathname: '/parking-orders/detail', state: item.orderNo });
                  }}
                >
                  {item.orderNo}
                </a>
                <span style={{ marginLeft: '10px' }}>￥{(item.amount / 100).toFixed(2)}</span>
              </li>
            ))}
          </ul>
        );
      },
    },
  ];
  return (
    <>
      <ProTable<MergeRecordTableItem>
        columns={columns}
        rowKey="_id"
        scroll={{ x: true }}
        search={{ labelWidth: 'auto' }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={queryMergeRecord}
      />
    </>
  );
};

export default MergeList;
